<template>
  <div class="custom-form-container">
    <div class="divide-title">动态表单</div>

    <div class="action-groups">
      <div class="controls-form">
        <base-select-dictionary v-model="dynamicForm.categoryCode" job="所属领域" option-value="dictCode" @change="onCategoryChange"></base-select-dictionary>
      </div>

      <div class="controls-radio">
        <el-radio-group v-model="labelPosition">
          <el-radio-button label="left">标签左对齐</el-radio-button>
          <el-radio-button label="right">标签右对齐</el-radio-button>
          <el-radio-button label="top">标签在上方</el-radio-button>
        </el-radio-group>
      </div>
    </div>


    <div class="form-wrapper">
      <dynamic-form ref="dynamicFormRef" v-model="form" label-width="175px" :label-position="labelPosition" :columns="fieldColumns"></dynamic-form>
    </div>

    <div class="btn-actions">
      <el-button type="primary" @click="onSubmit">提交</el-button>
    </div>
  </div>
</template>

<script>
import denselyPopulatedAreaFieldColumns from './field-column-config/denselyPopulatedArea';

export default {
  name: 'custom-form',
  data() {
    return {
      dynamicForm: {
        categoryCode: '2',
      },
      labelPosition: 'right',
      form: {
        belongFieldCode: '2',
        categoryCode: '',
      },
      fieldColumns: this.$store.getters['example/fieldColumns'],
      // fieldColumns: denselyPopulatedAreaFieldColumns(this),
      fieldColumns1: [
        {
          fieldType: 'input',
          fieldName: 'username',
          label: '用户名',
          col: { span: 6 },
          props: { placeholder: '请输入用户名' },
          validate: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        },
        {
          fieldType: 'select',
          fieldName: 'other.hobby',
          label: '爱好',
          col: { span: 6 },
          props: { placeholder: '请选择', multiple: true },
          options: [
            { value: 1, label: '篮球' },
            { value: 2, label: '足球' },
            { value: 3, label: '排球' },
            { value: 4, label: '乒乓球' },
          ],
          validate: [{ required: true, message: '请输入', trigger: 'change' }],
        },
        {
          fieldType: 'radio',
          fieldName: 'other.sex',
          label: '性别',
          col: { span: 6, visible: false },
          props: {},
          visible: form => form.categoryCode === '2',
          options: [{ value: 1, label: '男' }, { value: 2, label: '女' }, { value: -1, label: '未知' }],
          validate: [{ required: true, message: '请选择', trigger: 'change' }],
        },
        {
          fieldType: 'switch',
          fieldName: 'other.status',
          label: '是否启用',
          col: { span: 6 },
          props: { activeText: '启用', inactiveText: '禁用' },
          validate: [{ required: true, message: '请选择', trigger: 'change' }],
        },
        {
          fieldType: 'select-dictionary',
          fieldName: 'belongFieldCode',
          label: '所属领域',
          col: { span: 12 },
          props: { job: '所属领域' },
          on(obj) {
            obj.form.categoryCode = null;
          },
          validate: [{ required: true, message: '请选择', trigger: 'change' }],
        },
        {
          fieldType: 'select-dictionary',
          fieldName: 'categoryCode',
          label: '所属类别',
          col: { span: 12 },
          props: { pid: 'belongFieldCode' },
          onSelectItem: (obj) => {
            this.$refs['dynamicFormRef'].resetFields();
            obj.form.categoryCode = obj.record.dictCode;
          },
          validate: [{ required: true, message: '请选择', trigger: 'change' }],
        },
        {
          fieldType: 'textarea',
          fieldName: 'notes',
          label: '备注',
          col: { span: 24 },
          props: {
            rows: 4,
            resize: 'none',
            maxlength: 1000,
            showWordLimit: true,
          },
          validate: [{ required: true, message: '请选择', trigger: 'blur' }],
        },
      ],
    };
  },

  mounted() {
  },

  methods: {
    onCategoryChange(code) {
      const map = {
        '0': {
          form: { belongFieldCode: '0', categoryCode: '' },
          columns: [
            {
              fieldType: 'select-dictionary',
              fieldName: 'belongFieldCode',
              label: '所属领域：',
              col: { span: 8 },
              props: {
                job: '所属领域',
                optionValue: 'dictCode',
                disabled: true,
              },
              validate: [],
            },
            {
              fieldType: 'select-dictionary',
              fieldName: 'categoryCode',
              label: '所属类别：',
              col: { span: 8 },
              props: { pid: 53 },
              onSelectItem: (obj) => {
                this.$refs['dynamicFormRef'] && this.$refs['dynamicFormRef'].resetFields();
                obj.form.categoryCode = obj.record.dictCode;
              },
              validate: [{ required: true, message: '所属类别不能为空', trigger: 'change' }],
            },
          ],
        },
        '1': {
          form: {},
          columns: [],
        },
        '2': {
          form: { belongFieldCode: '2', categoryCode: '' },
          columns: denselyPopulatedAreaFieldColumns(this),
        },
        '3': {
          form: {},
          columns: [],
        },
      }[code];

      if (map) {
        this.$refs['dynamicFormRef'].clearForm();
        this.fieldColumns = map.columns;
        this.form = map.form;
      }
    },

    onSubmit() {
      this.$refs['dynamicFormRef'].validate(valid => {
        if (valid) {
          console.log('dynamic form change => ', JSON.parse(JSON.stringify(this.form)));
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.custom-form-container {
  width: 100%;

  .action-groups {
    width: 100%;
    //height: 40px;
    padding: 12px 0;
    display: flex;
    justify-content: space-between;

    .controls-form {

    }

    .controls-radio {

    }
  }

  .form-wrapper {
    width: 100%;
    height: 400px;
    padding: 12px;
    border: 1px solid #ddd;
    overflow-y: auto;
    overflow-x: hidden;
  }

  .btn-actions {
    padding: 12px 0;
  }
}
</style>
